<template>
  <div class="v-data-editor">
    <el-date-picker
      v-model="date"
      type="datetime"
      :disabled="isModelDisabled"
      :popper-options="popperOptions"
      @change="dateChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { modelService } from "@/modules/model/service";
import { ref, computed, watch, inject, Ref } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { PropertyRow } from "../../types";
import { BusEvent } from "@/constants/Enums";
import { formatTime } from "@/util/common";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;
const inAttrbutesWindow = inject("inAttrbutesWindow", ref(false)) as Ref<boolean>;
const props = defineProps<{
  row: PropertyRow;
}>();

const date = ref("");

watch(
  () => props.row.value,
  newVal => {
    date.value = newVal as string;
  },
  {
    immediate: true
  }
);

const popperOptions = computed(() => {
  if (inAttrbutesWindow) {
    return {
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [0, -40]
          }
        }
      ]
    };
  } else {
    return {};
  }
});

const dateChange = async (value: any) => {
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = formatTime(value);
  let res = await modelService.updateModelProperty(dto);
  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
};
</script>

<style lang="scss">
.v-data-editor {
  height: 26px;
  .el-date-editor {
    width: 100%;
    height: 26px;
    .el-input__wrapper {
      height: 26px;
    }
  }
  .el-input__prefix,
  .el-input__suffix {
    height: 24px;
  }
}
</style>
